<!DOCTYPE html>
<html>
<head>
    <script charset="utf-8" src="js/jquery.min.js?v=01291"></script>
    <script charset="utf-8" src="js/global.js?v=01291"></script>
    <script charset="utf-8" src="js/bootstrap.min.js?v=01291"></script>
    <script charset="utf-8" src="js/template.js?v=01291"></script>

    <link rel="stylesheet" href="css/bootstrap.css?v=01291">
    <link rel="stylesheet" href="css/style.css?v=1?v=01291">
    <link rel="stylesheet" href="css/member.css?v=01291">
    <link rel="stylesheet" href="css/order3.css?v=01291">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no" name="format-detection">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1;user-scalable=no;">
    <script charset="utf-8" src="js/jquery.form.js?v=01291"></script>
    <script charset="utf-8" src="js/prodSort.js?v=01291"></script>
    <script src="../js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="../js/plugins/dialog2/dialog.css">
    <script src="../js/plugins/dialog2/dialog.min.js"></script>
    <script src="../js/common.js"></script>
    <title>商品列表</title>
</head>
<body>
<div class="fanhui_cou">
    <div class="fanhui_1"></div>
    <div class="fanhui_ding">顶部</div>
</div>
<header class="header">
    <div class="fix_nav">
        <div class="nav_inner">
            <a class="nav-left back-icon" href="javascript:history.back();">返回</a>
            <div class="tit">产品列表</div>
        </div>
    </div>
</header>

<div class="container" id="container2">
    <div class="row">
        <ul class="mod-filter clearfix">
            <div class="white-bg_2 bb1">

                <li id="default" class="active"><a
                        title="默认排序" href="javascript:void(0);">默认</a></li>
                <li id="buys"><a title="点击按销量从高到低排序"
                                 href="javascript:void(0);">销量
                    <i class='icon_sort'></i>
                </a></li>
                <li id="cash"><a title="点击按价格从高到低排序"
                                 href="javascript:void(0);">价格
                    <i class='icon_sort'></i>
                </a></li>
            </div>
        </ul>

        <div class="item-list" id="container" rel="2" status="0">
            <input type="hidden" id="ListTotal" value="1">
            <div class="listCommodities">
                <div render-loop="list">
                    <a data-href="details.html?id=" render-key="list.id" render-fun="getHref">
                        <div class="hproduct clearfix" style="background:#fff;border-top:0px;">
                            <div class="p-pic"><img style="max-height:100px;margin:auto;" class="img-responsive"
                                                    render-src="list.coverUrl"></div>
                            <div class="p-info">
                                <p class="p-title" render-html="title"></p>
                                <p class="p-origin"><em class="price" render-key="list.price" render-fun="getPrice">¥10.00</em>
                                </p>
                                <p class="mb0">
                                    <del class="old-price" render-key="list.oldPrice" render-fun="getPrice">¥12.00</del>
                                    <del style="margin-left: 150px;color:#2a6496">销量:</del>
                                    <span style="color: red" render-html="list.saleCount"></span>
                                </p>

                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>

        <div id="ajax_loading" style="display:none;width:300px;margin: 10px  auto 15px;text-align:center;">
            <img src="images/loading.gif">
        </div>
        <form action='/m_search/prodlist' method="post" id="list_form">
            <input type="hidden" id="curPageNO" name="curPageNO" value=""/>
            <input type="hidden" id="categoryId" name="categoryId" value="36"/>
            <input type="hidden" id="orders" name="orders" value=""/>
            <input type="hidden" id="hasProd" name="hasProd" value=""/>
            <input type="hidden" id="keyword" name="keyword" value=""/>
            <input type="hidden" id="prop" name="prop" value=""/>
        </form>
    </div>
</div>
</body>
<div class="clear"></div>

<footer class="footer">
    <div class="foot-con">
        <div class="foot-con_2">
            <a href="index.html">
                <i class="navIcon home"></i>
                <span class="text">首页</span>
            </a>
            <a href="category.html">
                <i class="navIcon sort"></i>
                <span class="text">分类</span>
            </a>
            <a href="shopcart.html">
                <i class="navIcon shop"></i>
                <span class="text">购物车</span>
            </a>
            <a href="userhome.html">
                <i class="navIcon member"></i>
                <span class="text">我的</span>
            </a>
        </div>
    </div>
</footer>
<script>
    $(function () {
        var params = getParams();
        var currentPage=1;
        var pages;
        var travelData=[];
        function query() {
            $.get("/commodities",
                {catalogId:params.id,
                 currentPage:currentPage,
                 pageSize:5
            },function (data) {
                $.merge(travelData,data.list);
                var json={
                    list:travelData
                };
                    $(".listCommodities").renderValues(json,{
                    getHref:function (item, value) {
                        var url = $(item).data("href");
                        $(item).attr("href",url+value)
                    },
                    getPrice:function (item, value) {
                        if(value!=null) {
                            $(item).html("¥" + value+".00");
                        }else{
                            $(item).html("")
                        }
                    }

                });
                pages=data.pages;
            });
            currentPage++;
        }

        query();

        //监听滚动事件
        $(window).scroll(function () {
            //当滚上去的高度与手机窗口的高度大于等于html文档高度的时候,触发分页的操作
            if ($(document).scrollTop() + $(window).height() >= $(document).height()-2) {//有时候会有像素偏差,需要根据需求适当的减少文档高度
                //判断当前页是否小于或等于总页数,如果是,就执行查询
                if (pages >= currentPage) {
                    //执行分页查询
                    query();
                }else {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '已经到底了',
                        autoClose: 1500,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                }
            }
        });
    })
</script>
</html>
